<template>
  <div>
    <el-input v-model="search" placeholder="请输入用户名搜索"></el-input>
    <el-button class="search" @click="getUserList()" type="primary" size="small"
      >搜索</el-button
    >
    <el-button @click="resetSearch()" type="warning" size="small"
      >重置</el-button
    >

    <el-table :data="tableData" style="width: 100%">
      <el-table-column width="100px" label="序号" type="index">
        <!--序号连续-->
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="150">
      </el-table-column>
      <el-table-column prop="nickname" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="photo" label="头像" width="200">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.photo"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="clubName" label="所属社团" width="200">
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block" align="right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/api/request'

export default {
  name: 'SelectAllMember',

  data() {
    return {
      // 分页展示的数据
      tableData: [],
      pageSize: 6,
      currentPage: 1,
      totalCount: 0,
      // 搜索框
      search: '',

      ruleForm: {
        id: '',
        username: '',
        nickname: '',
        photo: '',
        clubName: '',
      },
    }
  },
  methods: {
    getUserList() {
      request
        .get('/president/studentlist', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            username: this.search,
          },
        })
        .then((res) => {
          console.log(res)
          this.tableData = res.data.items
          this.totalCount = res.data.total
        })
    },

    handleSizeChange: function (size) {
      //size是该函数自带的参数，代表变化后的每页显示的条数
      this.pageSize = size
      this.getUserList()
    },

    handleCurrentChange: function (currentPage) {
      //currentPage是该函数自带的参数，代表变化后的页码
      this.currentPage = currentPage
      this.getUserList()
    },

    //重置搜索框
    resetSearch() {
      this.search = ''
      this.getUserList()
    },
  },
  mounted() {
    this.getUserList()
  },
}
</script>

<style scoped>
* {
  margin: 7px;
  padding: 0px;
  box-sizing: border-box;
}
.el-input {
  width: 300px;
  padding-left: 50px;
}
.search {
  margin-left: 20px;
}
</style>
